<div class="flex flex-column bg-base minwidth-100pct minheight-100pct">
  <div class="flex flex-auto">
    <component-tree
       (collapseChildren)="collapseChildren.emit($event)"
       (expandChildren)="expandChildren.emit($event)"
       (inspectElement)="inspectElement.emit($event)"
       (selectNode)="selectNode.emit($event)"
       [selectedNode]="selectedNode"
       [tree]="tree"
       class="flex-grow">
    </component-tree>
  </div>
  <div class="bg-panel border-top">
    <header class="flex py1 px2 minwidth-100pct">
      <search
         (selectedResult)="onSelectedSearchResultChanged($event)"
         [handler]="onRetrieveSearchResults"
         [placeholder]="'Search components'">
      </search>
    </header>
  </div>
</div>
